<template>
  <div class="internal">
    <navbar :text="text"></navbar>
    <div class="article_list">
      <div
        class="article"
        v-for="item in health"
        :key="item._id"
        @click="healthAciton(item._id)"
      >
        <img :src="item.img" alt="" />
        <h1>{{ item.title }}</h1>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from "@/components/navbar.vue";
import { postArticle } from "../../../api/article";
export default {
  components: {
    navbar,
  },
  data() {
    return {
      text: "",
      health: [],
    };
  },
  watch: {
    $route() {
      this.reqData();
    },
  },
  methods: {
    //获取文章列表
    async reqData() {
      const { data } = await postArticle();
      console.log(data);
      this.health = data.datas;
      console.log(this.health);
    },
    healthAciton(id) {
      this.$router.push({
        name: "newsinfo",
        params: { text: "文案详情", id },
      });
    },
  },
  created() {
    this.text = this.$route.params.text;
  },
  mounted() {
    this.reqData();
  },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px/375) * 100vw;
}
.article_list {
  position: relative;
  z-index: 1;
  top: 46px;
  left: 0;
  height: calc(100% - vw(46));
  background-color: #fff;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .article {
    width: 100%;
    display: flex;
    padding: vw(30) vw(20) vw(0) vw(15);
    box-sizing: border-box;
    &:last-child {
      padding-bottom: vw(30);
    }
    img {
      width: vw(120);
      height: vw(68);
      margin-right: vw(10);
    }
    h1 {
      padding-top: vw(3);
      font-family: "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: vw(14);
      color: #333;
    }
  }
}
</style>
